<route lang="json">
{
  "meta": {
    "title": "t(home)"
  }
}
</route>
<script setup lang="ts">
import { _require } from "@@/utils/tools/index";
import { useInView } from "@@/hooks/toolsHooks";
import { inTopGroup } from "@@/common/js/animation";
import svg1 from "@@/common/svgAnimation/1";
const { vInView } = useInView();

const title = import.meta.env.VITE_GLOB_APP_TITLE;

const part4 = computed(() => [
  {
    title: "Financial institutions",
    content: `We help banks, investment firms, and other financial institutions to
          embed central bank digital currencies, programmable money, and other
          tokenised assets into their businesses.`,
  },
  {
    title: "Enterprises",
    content: `Companies of all sizes, from multinationals to SMEs, are building new
          business models on blockchain. We can get you to market faster, using
          technology that’s ready for the future.`,
  },
  {
    title: "Partners",
    content: `Whether you’re a vendor or a consultant, chances are your clients are
          drawn to the benefits of blockchain but daunted by the specialist
          knowledge required. We help you, help them.`,
  },
  {
    title: "Developers",
    content: `You may not be part of the 1% of developers who understands the
          complexities of blockchain. With ${title} Connect, you don’t need
          to be to build powerful apps that will run on any chain.`,
  },
]);

const part5 = computed(() => [
  {
    title: "Interoperability",
    content: `We believe the future of finance will be built on interconnected
              networks with value – in the form of smart money, tokenised
              assets, and information – flowing freely between them.`,
  },
  {
    title: "Ease of use",
    content: `We offer our customers an industry-leading and innovative trading
              platform, ensuring a profitable trading experience in an
              exceptional environment.`,
  },
  {
    title: "Adaptability",
    content: `Our technology makes it easy to deploy new tokens, to move them
              from chain to chain, to adapt smart contracts to new use cases.
              Because your choices today shouldn’t hold you back tomorrow.`,
  },
  {
    title: "Security",
    content: `Our regulators ensure that it complies with the regulations and
              standards of the financial industry Customers can trust and rely
              on their services. Whether in Canada or Australia, we are
              professional and transparent To conduct business in order to
              provide a safe and reliable trading environment.`,
  },
  {
    title: "Programmability",
    content: `One of the most powerful aspects of tokenised money is the ability
              to embed gradual control of its behaviour. The money of the future
              will be smarter, more useful, more purposeful.`,
  },
  {
    title: "Resilience",
    content: `We engineer resilience into our technology because we believe it
              is as much about enabling upside as it is protecting against risk.
              Resilience has its own value, providing opportunity in a volatile
              world.`,
  },
]);
</script>

<template>
  <CpageView class="auto-MT-lg Mcol-lg">
    <!-- 一栏 -->
    <ElRow class="ML-xxl" :justify="'space-between'" :align="'middle'">
      <ElCol :xs="24" :span="10">
        <div v-in-view:once="(e) => inTopGroup(e.target)" class="MR-lg">
          <h1>
            <span in-top>The</span>
            <br />
            <span in-top>foundation</span>
            <br />
            <span in-top>of</span> <span in-top>the</span>
            <br />
            <span class="T-M1" in-top> blockchain </span>
            <span class="T-M1" in-top> economy. </span>
            <br />
          </h1>
          <RouterLink :to="{ name: 'whoWeServe' }">
            <ElButton
              class="MT-md"
              in-top
              :type="'primary'"
              :size="'large'"
              plain
            >
              Who we serve
            </ElButton>
          </RouterLink>
        </div>
      </ElCol>
      <ElCol :xs="24" :span="14">
        <ElImage
          class="part-1_image"
          :src="_require('src/assets/images/desplay/1.jpg')"
          :fit="'cover'"
        />
      </ElCol>
    </ElRow>
    <!-- 二栏 -->
    <ElRow class="Mrow-xxl MT-xxl" :justify="'space-between'" :align="'middle'">
      <ElCol :xs="24" :span="10">
        <div class="MR-lg">
          <div
            v-in-view:once="(e) => svg1.animation(e.target)"
            v-html="svg1.svg"
          ></div>
        </div>
      </ElCol>
      <ElCol :xs="24" :span="14">
        <div v-in-view:once="(e) => inTopGroup(e.target)">
          <h2>
            <span in-top> Unlocking </span>
            <br />
            <span in-top> benefits for all. </span>
          </h2>
          <div class="MT-md auto-MT-sm">
            <p in-top>
              Assets of all kinds, from currencies to carbon credits, are being
              tokenised on blockchain.
            </p>
            <p in-top>
              Financial institutions, enterprises and their customers all
              benefit from assets whose ownership is immutable, provenance is
              traceable and use is easier to manage. Entirely new digital
              economies are emerging as a result.
            </p>
            <p in-top>
              Our patented technology makes this simple, trusted and
              future-proof.
            </p>
          </div>
        </div>
      </ElCol>
    </ElRow>
    <!-- 三栏 -->
    <div
      class="bg-img PD-xxl T-A-C C-white"
      :style="{
        '--bg-img': `url(${_require('src/assets/images/desplay/2.jpg')})`,
      }"
    >
      <div v-in-view:once="(e) => inTopGroup(e.target)">
        <h1>
          <span in-top>An<span>&nbsp;</span></span
          ><span in-top>empowered,</span>
          <br />
          <span in-top>interconnected<span>&nbsp;</span></span
          ><span in-top>world.</span>
        </h1>
        <h4 in-top class="MT-md">
          We help our customers dramatically reduce their time-to-market, create
          new revenue lines, and mitigate risk.
        </h4>
        <RouterLink :to="{ name: 'whoWeServe' }">
          <ElButton
            class="MT-md"
            in-top
            :type="'primary'"
            :size="'large'"
            plain
          >
            Who we serve
          </ElButton>
        </RouterLink>
      </div>
    </div>
    <!-- 四栏 -->
    <Csummarize class="T-A-C MT-xxl Prow-xxl">
      <CsummarizeItem v-for="item in part4">
        <RouterLink :to="{ name: 'whoWeServe' }">
          <h4>{{ item.title }}</h4>
          <p class="MT-md T-weak">
            {{ item.content }}
          </p>
          <ElImage
            class="right-arrow MT-sm"
            :src="_require('src/assets/images/icon/right-arrow.svg')"
          />
        </RouterLink>
      </CsummarizeItem>
    </Csummarize>
    <!-- 五栏 -->
    <div class="Prow-xxl">
      <div v-in-view:once="(e) => inTopGroup(e.target)">
        <h2 class="T-A-C">
          <span in-top>Why<span>&nbsp;</span></span>
          <span class="T-M1" in-top>{{ title }}</span>
          <span class="T-M1" in-top>?</span>
        </h2>
        <p in-top class="MT-md T-A-C T-weak">
          We make blockchain simple, trusted, and future-proof.
        </p>
      </div>
      <ElRow v-in-view:once="(e) => inTopGroup(e.target)" class="MT-lg">
        <ElCol v-for="item in part5" in-top :span="8" :xs="12">
          <div class="hover-line-L MG-md">
            <h3>{{ item.title }}</h3>
            <p class="MT-md T-weak">
              {{ item.content }}
            </p>
          </div>
        </ElCol>
      </ElRow>
    </div>
    <!-- 六栏 -->
    <div
      class="bg-img Pcol-xxl T-A-C C-white"
      :style="{
        '--bg-img': `url(${_require('src/assets/images/desplay/2.jpg')})`,
      }"
    >
      <div v-in-view:once="(e) => inTopGroup(e.target)">
        <h1>
          <span class="T-M1" in-top>Build<span>&nbsp;</span></span>
          <span in-top>the<span>&nbsp;</span></span>
          <span in-top>blockchain<span>&nbsp;</span></span>
          <span in-top>economy.</span>
        </h1>
        <h4 in-top class="MT-md">
          We help our customers dramatically reduce their time-to-market, create
          new revenue lines, and mitigate risk.
        </h4>
        <RouterLink :to="{ name: 'whoWeServe' }">
          <ElButton
            class="MT-md"
            in-top
            :type="'primary'"
            :size="'large'"
            plain
          >
            Who we serve
          </ElButton>
        </RouterLink>
      </div>
    </div>
  </CpageView>
</template>

<style lang="scss" scoped>
.CsummarizeItem {
  cursor: pointer;
  .right-arrow {
    height: 30rem;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.5s;
  }
  &:hover {
    h4 {
      color: var(--C-M1);
    }
    .right-arrow {
      transform: translateX(0);
      opacity: 1;
    }
  }
}
</style>
